<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Information</title>

  <!-- Normalize / Boxicons / 自定义样式… -->
  <link rel="stylesheet" href="css/normalize.min.css" />
  <link rel="stylesheet" href="css/boxicons.min.css" />
  <link rel="stylesheet" href="profile.css" />
</head>
<body>
  <!-- Add this near the top of body -->
  <div id="toastContainer" class="toast-container"></div>
  
  <div id="backgroundCanvas"></div>

  <!-- 头像修改弹窗 -->
  <div id="avatarModal" class="modal">
    <div class="modal-content">
      <span class="modal-close">&times;</span>
      <h2>修改头像</h2>
      <div class="modal-body">
        <img id="modalAvatarPreview" src="" alt="预览头像" />
        <!-- Replace the URL input with file input -->
        <input type="file" 
               id="modalAvatarInput" 
               accept="image/*" 
               style="display: none">
        <button type="button" id="uploadButton" class="btn btn-outline">
          选择图片
        </button>
      </div>
      <div class="modal-footer">
        <button id="modalCancel" class="btn btn-cancel">取消</button>
        <button id="modalSave" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>

  <div class="profile-wrapper">
    <button id="backButton" class="btn-back">
      <i class="bx bx-arrow-back"></i>
    </button>

    <!-- 暗/亮 切换 -->
    <div class="toggle-mode" id="modeToggle">
      <i class="bx bx-moon"></i>
    </div>

    <!-- 渐变背景切换 -->
    <div class="toggle-gradient" id="gradientToggle">
      <i class="bx bx-shuffle"></i>
    </div>
    <div class="profile-card">
      <!-- 返回箭头（可选） -->
      <!-- <button id="backButton" class="btn-back"><i class="bx bx-arrow-back"></i></button> -->

      <h1 class="title">个人资料</h1>
      <div class="avatar-area">
        <img id="avatarPreview" src="upload/images/default_head.jpg" alt="头像" />
        <div class="edit-icon"><i class="bx bx-edit-alt"></i></div>
      </div>

      <!-- ① 主信息表单 -->
      <form id="infoForm">
        <!-- 如果想在输入框里实时修改预览，可以保留下面这一行 -->
        <input type="url" id="avatarUrl" placeholder="头像 URL" style="display:none" />
        
        <div class="input-group">
          <label for="userId">UID:</label>
          <input type="text" id="userId" readonly placeholder="User ID" />
        </div>
        
        <div class="input-group">
          <label for="nickname">昵称:</label>
          <input type="text" id="nickname" required placeholder="昵称" />
        </div>
        
        <div class="input-group">
          <label for="email">邮箱:</label>
          <input type="email" id="email" required placeholder="邮箱" />
        </div>
        
        <!-- 新增性别选择 -->
        <div class="input-group">
          <label>性别:</label>
          <div class="gender-group">
            <div class="gender-option">
              <input type="radio" id="gender-male" name="gender" value="男" required>
              <label for="gender-male">男</label>
            </div>
            <div class="gender-option">
              <input type="radio" id="gender-female" name="gender" value="女" required>
              <label for="gender-female">女</label>
            </div>
            <div class="gender-option">
              <input type="radio" id="gender-other" name="gender" value="其他" required>
              <label for="gender-other">其他</label>
            </div>
          </div>
        </div>
        
        <!-- 新增个人简介 -->
        <div class="input-group">
          <label for="bio">个人简介:</label>
          <textarea id="bio" 
                    placeholder="请输入个人简介，让大家更好地了解你..." 
                    maxlength="200"
                    rows="4"></textarea>
          <div class="bio-counter">
            <span id="bioCount">0</span>/200
          </div>
        </div>
        
        <button type="submit" class="btn">保存修改</button>
      </form>

      <hr class="divider"/>

      <!-- ② 密码修改表单 -->
      <form id="passwordForm">
        <div class="input-group">
          <label for="oldPassword">原密码:</label>
          <input type="password" id="oldPassword" required placeholder="原密码" />
        </div>
        
        <div class="input-group">
          <label for="newPassword">新密码:</label>
          <input type="password" id="newPassword" required placeholder="新密码" />
        </div>
        
        <div class="input-group">
          <label for="confirmPassword">确认新密码:</label>
          <input type="password" id="confirmPassword" required placeholder="确认新密码" />
        </div>
        
        <button type="submit" class="btn">更新密码</button>
      </form>
    </div>
  </div>

  <script src="/socket.io/socket.io.js" defer></script>
  <script src="particles.js" defer></script>
  <script src="js/axios.min.js" defer></script>
  <script src="profile.js" defer></script>
</body>
</html>
